<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="base"
      th:with="pageTitle='分组管理'">
<head>
    <link rel="stylesheet" th:href="@{/css/index.css}">
    <style>
        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 16px;
            padding-right: 30px;
        }
    </style>
</head>
<body>
<th:block layout:fragment="custom_content">
    <el-dialog
            title="更新"
            :visible.sync="editDialogVisible"
            size="tiny"
            :before-close="handleAddClose" id="addDialog">
        <el-form :model="editForm" ref="editForm" label-width="100px" id="editForm" >

            <el-input type="hidden" v-model="editForm.id" v-bind:readonly="isReadOnly"></el-input>

            <el-form-item label="分类名" prop="pointValue">
                <el-input v-model="editForm.pointValue"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleEditSave('editForm')">修改</el-button>
        </div>
    </el-dialog>

    <el-dialog
            title="删除提示"
            :visible.sync="delDialogVisible"
            size="tiny">
        <span>删除的分类里含有文件，请慎重确认是否要删除？</span>
        <span slot="footer" class="dialog-footer">
                <el-button @click="delDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="regulationsConfirm">确 认</el-button>
            </span>
    </el-dialog>

    <div class="custom-tree-container" >
        <div class="block" style="padding: 0px;min-width:800px">
            <!--<p>分组管理</p>-->
            <div style="background-color: #fff;padding: 12px;min-height: 500px">

                <el-tree :data="regulations" show-checkbox node-key="id" ref="tree"
                         :default-checked-keys="defaultCheckedKeys" default-expand-all :expand-on-click-node="false" style="width: 850px">
              <span class="custom-tree-node" slot-scope="scope" >
                <i :class="scope.node.icon" style="width:15px"><span>{{ scope.node.label }}</span></i>
                <span>
                    <el-button type="text" size="medium" @click="append(scope.node,scope.data)" v-if="scope.data.type==0" style="font-size:16px">添加新分类</el-button>
                    <el-button type="text" size="medium" @click="appendFile(scope.node,scope.data)" v-if="scope.data.type==0" style="font-size:16px">添加文件</el-button>

                    <el-button type="text" size="medium" @click="update(scope.node, scope.data)" v-if="scope.data.type==0" style="font-size:16px">编辑</el-button>
                    <el-button type="text" size="medium" @click="updateFile(scope.node, scope.data)"  v-if="scope.data.type==1" style="font-size:16px;color:#ff0000">编辑</el-button>

                    <el-button v-if="scope.data.canDel&&scope.data.type==0" type="text" size="medium"
                               @click="remove(scope.node, scope.data)" style="font-size:16px">删除</el-button>
                     <el-button v-if="scope.data.canDel&&scope.data.type==1" type="text" size="medium"
                                @click="removeFile(scope.node, scope.data)" style="font-size:16px;color:#ff0000">删除</el-button>
                </span>
              </span>
                </el-tree>
            </div>


        </div>

        <!--<el-button type="primary" size="mini" @click="regulationsSave()">保存</el-button>-->
    </div>

</th:block>
<th:block layout:fragment="javascript">
    <script>
        var id = 1000;
        var node2 = '';
        var data2 = '';
        var indexVue = new Vue({
            el: '#app',
            data: function () {
                return {
                    siderWidthDialog:false,
                    siderbarWidth:15,
                    flag: 0,
                    jsList: [],
                    regulations: [],
                    regulationIds: [],
                    delDialogVisible:false,
                    breadcrumbs:['流程管理','分组管理'],
                    defaultCheckedKeys: [],
                    isReadOnly: true,
                    editDialogVisible: false,
                    delId:'',
                    editForm: {
                        id: '',
                        pointValue: '',
                        url:''
                    },
                    isCollapse: false,
                    defaultIndex: '1',
                    menus: [],
                    regulationMenus: [],
                    deptTrees:[]
                }
            },
            methods: {
                addHeight: function () {
                    var $this = this;
                    $this.$nextTick(function () {
                        changeFooterHeight();
                    })
                },
                handleAddClose: function () {
                    indexVue.editDialogVisible = false;
                },
                append: function (node, data) {
                    var $this = this;
                    var parentId = data.id;
                    var condition = {};
                    condition['parentId'] = parentId;
                    condition['flag'] = '0';
                    var loading = this.$loading({
                        lock: true,
                        text: '保存中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    $.ajax({
                        cache: false,
                        url: '/regulation/addCatalog',
                        type: 'POST',
                        data: JSON.stringify(condition, "\t"),
                        dataType: 'json',
                        contentType: 'application/json',
                        async: true,
                        success: function (data) {
                            if (data.status == 1) {
                                loading.close();
                                $this.$alert('添加分类成功！', '提示', {
                                    confirmButtonText: '确定',
                                    callback : function callback() {
                                        location.href = "/regulation/createmenu";
                                    }
                                });

                            } else {
                                loading.close();
                                $this.$alert('操作失败！', '提示', {
                                    confirmButtonText: '确定',
                                    callback : function callback() {

                                    }
                                });
                            }

                        }
                    });
                },
                appendFile: function (node, data) {
                    var $this = this;
                    var parentId = data.id;
                    var condition = {};
                    condition['parentId'] = parentId;
                    condition['flag'] = '1';
                    var loading = this.$loading({
                        lock: true,
                        text: '保存中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    $.ajax({
                        cache: false,
                        url: '/regulation/addCatalog',
                        type: 'POST',
                        data: JSON.stringify(condition, "\t"),
                        dataType: 'json',
                        contentType: 'application/json',
                        async: true,
                        success: function (data) {
                            if (data.status == 1) {
                                loading.close();
                                $this.$alert('添加文件成功！', '提示', {
                                    confirmButtonText: '确定',
                                    callback : function callback() {
                                        location.href = "/regulation/createmenu";
                                    }
                                });

                            } else {
                                loading.close();
                                $this.$alert('操作失败！', '提示', {
                                    confirmButtonText: '确定',
                                    callback : function callback() {

                                    }
                                });
                            }

                        }
                    });
                },
                update: function (node, data) {
                    // node2 = node;
                    // data2 = data;
                    indexVue.editForm.id = data.id;
                    indexVue.editForm.pointValue = data.label;
                    indexVue.editForm.url= node.parent.data.url;
                    indexVue.editForm.flag = '0';
                    indexVue.editDialogVisible = true;

                },
                updateFile: function (node, data) {
                    // node2 = node;
                    // data2 = data;
                    indexVue.editForm.id = data.id;
                    indexVue.editForm.pointValue = data.label;
                    indexVue.editForm.url= node.parent.data.url;
                    indexVue.editForm.flag = '1';
                    indexVue.editDialogVisible = true;

                },
                remove: function (node, data) {
                    var condition = {};
                    condition['id'] = data.id;
                    condition['flag'] = '0';
                    indexVue.delId = data.id;
                    $.ajax({
                        cache: false,
                        url: '/regulation/deleteConfirm',
                        type: 'POST',
                        data: JSON.stringify(condition, "\t"),
                        dataType: 'json',
                        contentType: 'application/json',
                        async: false,
                        success: function (data) {
                            if (data.status == 1) {
                                indexVue.regulationsConfirm();
                            } else {
                                indexVue.delDialogVisible = true;

                            }

                        }
                    });
                },
                removeFile: function (node, data) {
                    var $this = this;
                    var condition = {};
                    condition['id'] = data.id;
                    condition['flag'] = '1';
                    indexVue.delId = data.id;
                    var loading = this.$loading({
                        lock: true,
                        text: '删除中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    $.ajax({
                        cache: false,
                        url: '/regulation/deleteFile',
                        type: 'POST',
                        data: JSON.stringify(condition, "\t"),
                        dataType: 'json',
                        contentType: 'application/json',
                        async: false,
                        success: function (data) {
                            if (data.status == 1) {
                                loading.close();
                                $this.$alert('删除成功！', '提示', {
                                    confirmButtonText: '确定',
                                    callback : function callback() {
                                        location.href = "/regulation/createmenu";
                                    }
                                });

                            } else {
                                loading.close();
                                $this.$alert('操作失败！', '提示', {
                                    confirmButtonText: '确定',
                                    callback : function callback() {

                                    }
                                });
                            }
                        }
                    });
                },
                regulationsConfirm: function () {
                    var $this = this;

                    indexVue.delDialogVisible = false;
                    var condition = {};
                    condition['id'] = indexVue.delId;
                    var loading = this.$loading({
                        lock: true,
                        text: '保存中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    $.ajax({
                        cache: false,
                        url: '/regulation/deleteCatalog',
                        type: 'POST',
                        data: JSON.stringify(condition, "\t"),
                        dataType: 'json',
                        contentType: 'application/json',
                        async: true,
                        success: function (data) {
                            if (data.status == 1) {
                                loading.close();
                                $this.$alert('操作成功！', '提示', {
                                    confirmButtonText: '确定',
                                    callback : function callback() {
                                        location.href = "/regulation/createmenu";
                                    }
                                });

                            } else {
                                loading.close();
                                $this.$alert('操作失败！', '提示', {
                                    confirmButtonText: '确定',
                                    callback : function callback() {

                                    }
                                });
                            }

                        }
                    });
                },
                regulationsSave: function () {
                    this.$refs.tree.setCheckedKeys([]);
                    this.$refs.tree.setCheckedKeys([1]);

                    var nodes = this.$refs.tree.getCheckedKeys();

                    var list = new Object();
                    var jsonlist = new Array();
                    var jslist = new Array();

                    var n = 0;
                    for (var i = 0; i < nodes.length; i++) {
                        var list = new Object();

                        var id = nodes[i];
                        var node = this.$refs.tree.getNode(id);

                        list.id = id;
                        list.label = node.label;
                        list.parentId = node.parent.data.id;
                        list.url = node.parent.data.url + "/" + list.label;

                        if ($.Map.containsKey(id)) {
                            list.flag = $.Map.get(id);
                        }

                        n = i;
                        jsonlist[i] = list;
                    }

                    var keys = $.Map.keys();

                    for (var m = 0; m < keys.length; m++) {
                        var list = new Object();
                        list.id = keys[m];
                        list.flag = $.Map.get(keys[m]);
                        if ('delete' == list.flag) {
                            jsonlist[n + m + 1] = list;
                        }
                    }
                    var jslist = JSON.stringify(jsonlist, "\t");

                    indexVue.jsList = jslist;
                    $.ajax({
                        cache: false,
                        url: '/regulation/edit',
                        type: 'POST',
                        data: jslist,
                        dataType: 'json',
                        contentType: 'application/json',
                        async: false,
                        success: function (data) {
                            if (data.status == 1) {
                                indexVue.regulationsConfirm();
                            } else {
                                indexVue.delDialogVisible = true;

                            }

                        }
                    });

                },
                handleEdit: function (data) {

                    indexVue.editForm.pointValue = data;
                    indexVue.editDialogVisible = true;
                },
                handleEditSave: function (formName) {
                    var $this = this;
                    this.$refs[formName].validate(function (valid) {
                         data2.label = indexVue.editForm.pointValue;

                        var id = indexVue.editForm.id;
                        var url = indexVue.editForm.url + "/" + indexVue.editForm.pointValue;
                        var condition = {};
                        condition['id'] = id;
                        condition['label'] = indexVue.editForm.pointValue;
                        condition['url'] = url;
                        condition['flag'] = indexVue.editForm.flag;
                        var loading = $this.$loading({
                            lock: true,
                            text: '保存中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        $.ajax({
                            cache: false,
                            url: '/regulation/updateCatalog',
                            type: 'POST',
                            data: JSON.stringify(condition, "\t"),
                            dataType: 'json',
                            contentType: 'application/json',
                            async: true,
                            success: function (data) {
                                if (data.status == 1) {
                                    loading.close();
                                    $this.$alert('编辑分类成功！', '提示', {
                                        confirmButtonText: '确定',
                                        callback : function callback() {
                                            location.href = "/regulation/createmenu";
                                        }
                                    });
                                    indexVue.editDialogVisible = false;
                                } else {
                                    loading.close();
                                    $this.$alert('操作失败！', '提示', {
                                        confirmButtonText: '确定',
                                        callback : function callback() {

                                        }
                                    });
                                }

                            }
                        });
                    });

                },
                search: function () {
                    $.ajax({
                        cache: false,
                        url: '/regulation/dataAll?newDate='+Math.random(),
                        type: 'GET',
                        data: {},
                        dataType: 'json',
                        contentType: 'application/json',
                        async: false,
                        success: function (data) {
                            if (data.status == 1) {

                                indexVue.regulations = data.value.regulations;
                                indexVue.defaultCheckedKeys = data.value.regulationIds;
                                indexVue.addHeight();
                            }
                        }
                    });
                },
                initMenu: function () {
                    var $this = this;
                    var data = commonInitMenu($this);
                },
                toggleMenu: function () {
                    this.isCollapse = !this.isCollapse;
                    window.localStorage.setItem('isCollapse',this.isCollapse);
                },
                changeSiderWidth:function(value){
                    changeSiderWidth(this,value);
                },
                openChangeSiderWidth:function(){
                    this.siderWidthDialog=true;
                }
            },
            created: function () {
                initCssProperty(this);
            }
        });
        $(function () {
            indexVue.initMenu();
            indexVue.search();

            jQuery.Map = {
                // 数据存储对象
                datamap: {},

                // 根据key从Map中获取值
                get: function (key) {
                    return this.datamap[key];
                },

                // 向Map中设置值
                put: function (key, value) {
                    this.datamap[key] = value;
                },

                // 获取Map中元素个数
                size: function () {
                    return this.keys().length;
                },

                //根据key删除Map中元素
                remove: function (key) {
                    delete this.datamap[key];
                },

                //判断map是否为空，如果为空则返回true，否则返回false
                isEmpty: function () {
                    return this.size() == 0;
                },

                //判断map中是否存在指定的key，如果存在返回true，否则返回false
                containsKey: function (key) {
                    return key in this.datamap;
                },

                //判断map中是否存在指定的value，如果存在返回true，否则返回false
                containsValue: function (value) {
                    return this.values().indexOf(value) > -1;
                },

                //清空map中所有元素
                clear: function () {
                    for (key in this.datamap) {
                        delete this.datamap[key];
                    }
                },

                //遍历map中所有key，返回所有key组成的数组
                keys: function () {
                    keys = [];
                    for (key in this.datamap) {
                        keys.push(key);
                    }
                    return keys;
                },

                //遍历map中所有value，返回所有value组成的数组
                values: function () {
                    values = [];
                    for (key in this.datamap) {
                        values.push(this.datamap[key]);
                    }
                    return values;
                }
            };
        });
        function getNum() {
            var num = "";
            for (var i = 0; i < 6; i++) {
                num += Math.floor(Math.random() * 10);
            }
            return num;
        }

    </script>
</th:block>
</body>
</html>



